<template>
  <div>
    <van-form @submit="onSubmit" class="loginfrom">
      <van-field v-model="username" name="用户名" label="用户名" placeholder="用户名" :rules="[{ required: true, message: '请填写用户名' }]" />
      <van-field v-model="password" type="password" name="密码" label="密码" placeholder="密码" :rules="[{ required: true, message: '请填写密码' }]" />
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">登录</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
export default {
  name: 'loginfrom',
  data() {
    return {
      //用户名
      username: '',
      //密码
      password: ''
    }
  },
  methods: {
    onSubmit(values) {
      //点击登录之前把errno清空，防止密码错误时，还能登录成功
      this.$store.state.login.login.errno = ''
      this.$store.dispatch('getlogin', { username: this.username, pwd: this.password })
      setTimeout(() => {
        //判断是否登录成功，如果登录成功传值给父组件，把弹出层关了
        if (this.$store.state.login.login.errno === 0) {
          this.$emit('giveFather', this.$store.state.login.show)
        }
      }, 200)
    }
  },
  updated() {}
}
</script>

<style lang="less" scoped>
.loginfrom {
  padding: 10% 10%;
}
</style>